<template>
    <el-dialog
            :title="title"
            :visible.sync="isVisible"
            :width="width"
            :before-close="handleClose"
            :lock-scroll="true"
            :close-on-click-modal="false"
            custom-class="pub_dialog"
            @open="getData"
    >
        <VForm
                ref="vformComponents"
                :form="formData.form"
                :options="formData.options"
                :rules="formData.rules"
                :labelWidth="formData.labelWidth"
                :rowspan="rowspan"
                @toLoadMethods="toLoadMethods"
                @changeGdArea="facilityIdDataChange"
        ></VForm>

      <div class="formTitle-root" v-show="showExamine">
        <div class="form-title-p">审核信息</div>
      </div>

      <VForm
        v-show="showExamine"
        ref="vformComponents1"
        :form="formData1.form"
        :options="formData1.options"
        :rules="formData1.rules"
        :labelWidth="formData1.labelWidth"
        :rowspan="rowspan"
      ></VForm>

        <span slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="sure" v-if="openType!='detail'">确 定</el-button>
    </span>
    </el-dialog>
</template>

<script>
    import { riskPlanDetail,
            riskPlanUpdate,
            riskPlanAdd } from '@/api/risk/plan'
    import VForm from "@/components/VForm/index";
    import { alarmFacilityList } from '@/api/alarm/facility'
    export default {
        components: {
            VForm,
        },
        props: {
            width: {
                type: String,
                default: "70%",
            },
            title: {
                type: String,
                default: "详情",
            },
            id:{},
            openType:{
                type:String,
                default:"add"
            },
            dialogVisible: {
                type: Boolean,
                default: false
            },
          largeType:{},
          riskPlanSuitTypeOptionsFormat:{}
        },
        watch: {
            'width': {
                handler(newVal, oldVal) {
                    console.log('newVal===',newVal, oldVal)
                    let w = this.width.split('%')[0]
                    if(w>=60){
                        this.rowspan = 2
                    }else{
                        this.rowspan = 1
                    }
                },
                deep: true,
                immediate: true
            },
            'largeTypeOptions':{
                handler(newVal, oldVal) {
                    this.formData.options.forEach(t=>{
                        if(t.key=='largeType'){
                        t.option.data = newVal
                    }
                })
                },
                deep: true,
                immediate: true
            },
            'secretLevelOptions':{
                handler(newVal, oldVal) {
                    this.formData.options.forEach(t=>{
                        if(t.key=='secretLevel'){
                        t.option.data = newVal
                    }
                })
                },
                deep: true,
                immediate: true
            },
            'planLevelOptions':{
                handler(newVal, oldVal) {
                    this.formData.options.forEach(t=>{
                        if(t.key=='planLevel'){
                        t.option.data = newVal
                    }
                })
                },
                deep: true,
                immediate: true
            },
            'planFlagOptions':{
                handler(newVal, oldVal) {
                    this.formData.options.forEach(t=>{
                        if(t.key=='planFlag'){
                        t.option.data = newVal
                    }
                })
                },
                deep: true,
                immediate: true
            },
            'versionFlagOptions':{
                handler(newVal, oldVal) {
                    this.formData.options.forEach(t=>{
                        if(t.key=='versionFlag'){
                        t.option.data = newVal
                    }
                })
                },
                deep: true,
                immediate: true
            },
            'filingsStatusOptions':{
                handler(newVal, oldVal) {
                    this.formData.options.forEach(t=>{
                        if(t.key=='filingsStatus'){
                        t.option.data = newVal
                    }
                })
                },
                deep: true,
                immediate: true
            },
            'examineStatusOptions':{
                handler(newVal, oldVal) {
                    this.formData1.options.forEach(t=>{
                        if(t.key=='examineStatus'){
                        t.option.data = newVal
                    }
                })
                },
                deep: true,
                immediate: true
            },
            'riskPlanSuitTypeOptionsFormat':{
              handler(newVal, oldVal) {
                this.formData.options.forEach(t=>{
                  if(t.key=='suitTypeSmall'){
                    t.option.data = newVal
                  }
                })
              },
              deep: true,
              immediate: true
            },
            'openType':{
              handler(newVal, oldVal) {
                // 判断当前是否审批页面
                let pathArray = this.$route.path.split("/")
                this.showExamine = pathArray[pathArray.length-1]!="ctrl"

                this.formData.options.forEach(t=>{
                    t.disabled = newVal == 'detail' || this.showExamine
                })
                this.formData1.options.forEach(t=>{
                  if(!t.readonly){
                    t.disabled = newVal == 'detail'
                  }
                })
              },
              deep: true,
              immediate: true
            },
            'formData.form.areaCode':{
              handler(newVal, oldVal) {
                console.log("formData.form.areaCode",newVal)
                // this.formData.form .facilityId = ''
                this.facilityDataList = []
                let params = this.getFacilityDataListParams(newVal, this.formData.form.suitTypeSmall)
                if(Object.keys(params).length!=0){
                  this.getFacilityDataList(params)
                }
              },
              deep: true,
              immediate: true
            },
            'formData.form.suitTypeSmall':{
              handler(newVal, oldVal) {
                console.log("formData.form.suitTypeSmall",newVal)
                // this.formData.form .facilityId = ''
                this.facilityDataList = []
                let params = this.getFacilityDataListParams(this.formData.form.areaCode, newVal);
                if(Object.keys(params).length!=0){
                  this.getFacilityDataList(params)
                }
              },
              deep: true,
              immediate: true
            },
            'facilityDataList':{
              handler(newVal, oldVal) {
                this.formData.options.forEach(t=>{
                  if(t.key=='facilityId'){
                    t.option.data = newVal
                  }
                })
              },
              deep: true,
              immediate: true
            }
        },
        computed: {
            isVisible: {
                get() {
                    return this.dialogVisible
                },
                set() {
                    this.close()
                }
            }
        },
        data() {
            return {
                showExamine:false,
                rowspan:1,
                dict:{},
                formData1: {
                form: {
                  examineBy:"",
                  examineStatus:"",
                  examineOption:"",
                  updateTime:""
                },
                options: [
                  {
                    title: "审核人",
                    key: "examineBy",
                    type: "text",
                  },
                  {
                    title: "审核状态",
                    key: "examineStatus",
                    type: "select",
                    multiple:false,
                    option: {
                      data: this.examineStatusOptions,
                      props: {
                        key: "id", // 指定key对应data的字段
                        label: "label", // 指定label对应data的字段
                        value: "value", // 指定value对应data的字段
                      },
                    },
                  },
                  {
                    title: "审核时间",
                    key: "updateTime",
                    type: "text",
                    readonly: true,
                    disabled: true
                  },
                  {
                    title: "审核意见",
                    key: "examineOption",
                    type: "textarea",
                    columnWidth:'w100'
                  },
                ],
                rules: {
                  examineBy :[
                    {max:36, message: '长度最大为36个字符', trigger: 'blur'}
                  ],
                  examineStatus :[
                  ],
                  examineOption :[
                    {max:128, message: '长度最大为128个字符', trigger: 'blur'}
                  ],
                },
                labelWidth: "140px",
              },
                formData: {
                    form: {
                            name:"",
                            version:"",
                            largeType:"",
                            detailType:"",
                            secretLevel:"",
                            planLevel:"",
                            releaseTime:"",
                            startSuitTime:"",
                            endSuitTime:"",
                            drawRemark:"",
                            drawUnit:"",
                            drawUnitCode:"",
                            releaseUnit:"",
                            releaseUnitCode:"",
                            planFlag:"",
                            versionFlag:"",
                            filingsStatus:"",
                            contacts:"",
                            contactsPhone:"",
                            areaCode:"",
                            file:[],
                            suitTypeSmall:"",
                            suitTypeLarge:"",
                            facilityId:""
                        },
                    options: [
                                   {
                                       title: "预案名称",
                                       key: "name",
                                       type: "text",
                                   },
                                   {
                                       title: "预案版本",
                                       key: "version",
                                       type: "text",
                                   },
                                {
                                    title: "预案大类",
                                    key: "largeType",
                                    type: "select",
                                    multiple:false,
                                    option: {
                                        data: this.largeTypeOptions,
                                        props: {
                                            key: "id", // 指定key对应data的字段
                                            label: "label", // 指定label对应data的字段
                                            value: "name", // 指定value对应data的字段
                                        },
                                    },
                                    disabled:true
                                },
                                   {
                                       title: "预案细类",
                                       key: "detailType",
                                       type: "text",
                                   },
                                {
                                    title: "预案密级",
                                    key: "secretLevel",
                                    type: "select",
                                    multiple:false,
                                    option: {
                                        data: this.secretLevelOptions,
                                        props: {
                                            key: "id", // 指定key对应data的字段
                                            label: "label", // 指定label对应data的字段
                                            value: "name", // 指定value对应data的字段
                                        },
                                    },
                                },
                                {
                                    title: "预案级别",
                                    key: "planLevel",
                                    type: "select",
                                    multiple:false,
                                    option: {
                                        data: this.planLevelOptions,
                                        props: {
                                            key: "id", // 指定key对应data的字段
                                            label: "label", // 指定label对应data的字段
                                            value: "name", // 指定value对应data的字段
                                        },
                                    },
                                },
                                   {
                                       title: "发布时间",
                                       key: "releaseTime",
                                       type: "date",
                                   },
                                   {
                                       title: "适用开始时间",
                                       key: "startSuitTime",
                                       type: "date",
                                   },
                                   {
                                       title: "适用结束时间",
                                       key: "endSuitTime",
                                       type: "date",
                                   },
                                   {
                                       title: "编制说明",
                                       key: "drawRemark",
                                       type: "text",
                                   },
                                   {
                                       title: "编制单位",
                                       key: "drawUnit",
                                       type: "text",
                                   },
                                   {
                                       title: "编制单位编码",
                                       key: "drawUnitCode",
                                       type: "text",
                                   },
                                   {
                                       title: "发布单位名称",
                                       key: "releaseUnit",
                                       type: "text",
                                   },
                                   {
                                       title: "发布单位编码",
                                       key: "releaseUnitCode",
                                       type: "text",
                                   },
                                {
                                    title: "预案标志",
                                    key: "planFlag",
                                    type: "select",
                                    multiple:false,
                                    option: {
                                        data: this.planFlagOptions,
                                        props: {
                                            key: "id", // 指定key对应data的字段
                                            label: "label", // 指定label对应data的字段
                                            value: "name", // 指定value对应data的字段
                                        },
                                    },
                                },
                                {
                                    title: "版本标志",
                                    key: "versionFlag",
                                    type: "select",
                                    multiple:false,
                                    option: {
                                        data: this.versionFlagOptions,
                                        props: {
                                            key: "id", // 指定key对应data的字段
                                            label: "label", // 指定label对应data的字段
                                            value: "name", // 指定value对应data的字段
                                        },
                                    },
                                },
                                {
                                    title: "备案状态",
                                    key: "filingsStatus",
                                    type: "select",
                                    multiple:false,
                                    option: {
                                        data: this.filingsStatusOptions,
                                        props: {
                                            key: "id", // 指定key对应data的字段
                                            label: "label", // 指定label对应data的字段
                                            value: "name", // 指定value对应data的字段
                                        },
                                    },
                                },
                                   {
                                       title: "联系人",
                                       key: "contacts",
                                       type: "text",
                                   },
                                   {
                                       title: "联系电话",
                                       key: "contactsPhone",
                                       type: "text",
                                   },
                                   {
                                     title: "所属区域",
                                     key: "areaCode",
                                     type: "gdAreaSelect",
                                   },
                                  {
                                    title: "分类",
                                    key: "suitTypeSmall",
                                    type: "cascader",
                                    option: {
                                      data: this.riskPlanSuitTypeOptionsFormat,
                                      props: {
                                        label: "label", // 指定label对应data的字段
                                        value: "value", // 指定value对应data的字段
                                      },
                                    },
                                    event:'facilityIdDataChange'
                                  },
                                   {
                                     title: "所属设施",
                                     key: "facilityId",
                                     type: "select",
                                     multiple:false,
                                     option: {
                                       data: this.facilityDataList,
                                       props: {
                                         key: "id", // 指定key对应data的字段
                                         label: "name", // 指定label对应data的字段
                                         value: "id", // 指定value对应data的字段
                                       },
                                     },
                                   },
                                   {
                                       title: "预案附件",
                                       key: "file",
                                       type: "file",
                                       fileType:"file",
                                       listType:"text",
                                       uploadTextTip:""
                                   },
                    ],
                    rules: {
                        name :[
                           { required: true, message: '请输入', trigger: 'blur' },
                           {max:128, message: '长度最大为64个字符', trigger: 'blur'}
                        ],
                        version :[
                          {max:32, message: '长度最大为32个字符', trigger: 'blur'}
                        ],
                        largeType :[
                        ],
                        detailType :[
                          {max:16, message: '长度最大为16个字符', trigger: 'blur'}
                        ],
                        secretLevel :[
                        ],
                        planLevel :[
                        ],
                        releaseTime :[
                        ],
                        startSuitTime :[
                        ],
                        endSuitTime :[
                        ],
                        drawRemark :[
                          {max:64, message: '长度最大为64个字符', trigger: 'blur'}
                        ],
                        drawUnit :[
                          {max:64, message: '长度最大为64个字符', trigger: 'blur'}
                        ],
                        drawUnitCode :[
                          {max:64, message: '长度最大为64个字符', trigger: 'blur'}
                        ],
                        releaseUnit :[
                          {max:64, message: '长度最大为64个字符', trigger: 'blur'}
                        ],
                        releaseUnitCode :[
                          {max:64, message: '长度最大为64个字符', trigger: 'blur'}
                        ],
                        planFlag :[
                        ],
                        versionFlag :[
                        ],
                        filingsStatus :[
                        ],
                        contacts :[
                          {max:36, message: '长度最大为36个字符', trigger: 'blur'}
                        ],
                        contactsPhone :[
                          {max:36, message: '长度最大为36个字符', trigger: 'blur'}
                        ],
                        file :[
                        ],
                    },
                    labelWidth: "140px",
                },
                // 字典
                largeTypeOptions:[],
                secretLevelOptions:[],
                planLevelOptions:[],
                planFlagOptions:[],
                versionFlagOptions:[],
                filingsStatusOptions:[],
                examineStatusOptions:[],
                facilityDataList:[]
            };
        },
        methods: {
          toLoadMethods(methods) {
            this[methods]()
          },
          facilityIdDataChange(){
            this.$set(this.formData.form, 'facilityId', '')
          },
          getFacilityDataListParams(area, type){
            let params = {}
            if(area){
              for(let i=area.length-1; i>=0; i--){
                let code = area[i]
                if(code){
                  // 最多截取6查询
                  params["areaCodeFormat"] = code.substring(0, 2+2*i)
                  break;
                }
              }
            }else {
              // 默认当前登录人员
              params["areaCodeFormat"] = this.$store.state.account.user.deptIds
            }
            if(type){
              // 获取对应设施modeType
              if(type[0]!=99){
                let item = this.riskPlanSuitTypeOptionsFormat.find(t=>t.value==type[0])
                if(undefined!=item){
                  let subItem = item.children.find(t=>t.value == type[1])
                  console.log("subItem",subItem,item)
                  if(undefined!=subItem){
                    params["modeType"] = subItem.alarmType
                  }
                }
              }
            }
            return params
          },
          getFacilityDataList(params){
            alarmFacilityList(params).then(res=>{
              if(res.code==200){
                this.facilityDataList = res.data
              }
            })
          },
            submitFormat(){
                   this.formData.form.file = JSON.stringify(this.formData.form.file)
                  if(this.formData.form.suitTypeSmall){
                    this.formData.form.suitTypeLarge = this.formData.form.suitTypeSmall[0]
                    this.formData.form.suitTypeSmall = this.formData.form.suitTypeSmall.toString()
                  }
            },
            loadFormat(){
                 this.formData.form.file  = this.formData.form.file ? JSON.parse(this.formData.form.file) : []
                 if(this.formData.form.suitTypeSmall){
                   this.formData.form.suitTypeSmall = this.formData.form.suitTypeSmall.split(",")
                 }
            },
            getCheckBoxData(value,option,type){
                if(type=="submit"){
                    if(value.length==0){
                        return null
                    }
                    let temp = [];
                    value.forEach(t=>{
                        let item = option.find(x=> x.label == t)
                    if(item!=undefined){
                        temp.push(item.value)
                    }
                })
                    return temp.join(",")
                }else {
                    if(!value){
                        return []
                    }else {
                        let data = value.split(",")
                        let temp = []
                        data.forEach(t=>{
                            let item = option.find(x=> x.value == t)
                        if(item!=undefined){
                            temp.push(item.label)
                        }
                    })
                        return temp
                    }
                }
            },
            sure(){
                console.log('sure===',this.formData.form)
                this.$refs.vformComponents.$refs.form.validate().then(res=>{
                    if(this.formData.form.areaCode){
                        let temp  = this.formData.form.areaCode
                        this.formData.form.provinceCode = temp[0]
                        this.formData.form.cityCode = temp[1]
                        this.formData.form.countyCode = temp[2]
                        this.formData.form.areaCode = temp[2]
                    }
                    this.submitFormat()
                    if(this.openType == "add"){
                        this.add()
                    }else{
                        this.update()
                    }
                })
            },
            add(){
                this.formData.form.id = null
                let params = {
                  ...this.formData.form,
                  examineBy: this.formData1.form.examineBy,
                  examineStatus: this.formData1.form.examineStatus,
                  examineOption: this.formData1.form.examineOption
                }
                riskPlanAdd(params).then(res=>{
                    if(res.code==200){
                    this.$message({
                        message: this.$t('tips.createSuccess'),
                        type: 'success'
                    })
                    this.closeSuccess()
                    }else{
                    this.$message({
                        message: this.$t('tips.systemException'),
                        type: 'error'
                    })
                    }
                })
            },
            update(){
                  delete this.formData.form.examineBy
                  delete this.formData.form.examineStatus
                  delete this.formData.form.examineOption
                  let params = {
                    ...this.formData.form,
                    examineBy: this.formData1.form.examineBy,
                    examineStatus: this.formData1.form.examineStatus,
                    examineOption: this.formData1.form.examineOption
                  }
                   riskPlanUpdate(params).then(res=>{
                        if(res.code==200){
                        this.$message({
                             message: this.$t('tips.updateSuccess'),
                            type: 'success'
                        })
                        this.closeSuccess()
                      }else{
                        this.$message({
                            message: this.$t('tips.systemException'),
                            type: 'error'
                        })
                     }
                })
            },
            cancel(){
                this.close()
            },
            handleClose(done) {
                done()
                this.close()
            },
            closeSuccess(){
                this.$refs.vformComponents.$refs.form.resetFields();
                this.$refs.vformComponents1.$refs.form.resetFields();
                this.$emit('success')
            },
            close(){
                this.$refs.vformComponents.$refs.form.resetFields();
                this.$refs.vformComponents1.$refs.form.resetFields();
                this.$emit('close')
            },
            getData(){
              // let pathArray = this.$route.path.split("/")
              // let type = pathArray[pathArray.length-1]
              // this.showExamine = type!="ctrl"
              // console.log("type=======》",type)
              this.largeTypeOptions = []
              this.$commonJs.filterDataDict("riskPlanLargeType",this.largeTypeOptions )
              this.secretLevelOptions = []
              this.$commonJs.filterDataDict("riskPlanSecretLevel",this.secretLevelOptions)
              this.planLevelOptions = []
              this.$commonJs.filterDataDict("riskPlanLevel",this.planLevelOptions)
              this.planFlagOptions = []
              this.$commonJs.filterDataDict("riskPlanFlag",this.planFlagOptions)
              this.versionFlagOptions = []
              this.$commonJs.filterDataDict("riskPlanVersionFlag",this.versionFlagOptions)
              this.filingsStatusOptions = []
              this.$commonJs.filterDataDict("riskPlanFilingsStatus",this.filingsStatusOptions)
              this.examineStatusOptions = []
              this.$commonJs.filterDataDict("riskPlanExamineStatus",this.examineStatusOptions)
                if(this.openType!="add"){
                    riskPlanDetail(this.id).then(res=>{
                        if(res.code==200){
                            this.formData.form = res.data
                            this.loadFormat()
                            if(res.data.provinceCode && res.data.cityCode && res.data.countyCode){
                              this.formData.form.areaCode = [res.data.provinceCode,res.data.cityCode,res.data.countyCode]
                            }
                            this.formData1.form.examineBy = res.data.examineBy
                            this.formData1.form.examineStatus = res.data.examineStatus
                            this.formData1.form.examineOption = res.data.examineOption
                            this.formData1.form.updateTime =  res.data.examineStatus ?  res.data.updateTime : "-"
                         }else{
                            this.$message({
                                message: this.$t('tips.systemException'),
                                type: 'error'
                            })
                        }
                    })
                }else {
                  this.formData.form.largeType = this.largeType
                }
            }
        },
    };
</script>

<style lang="scss" scoped>
  @import "@/styles/element-variables.scss";
  .formTitle-root{
    padding: 10px 0;
    border-bottom: 1px solid #EFEFEF;
    font-size: 16px;
    position: relative;
    margin-bottom: 5px;
    .form-title-p{
      padding-left: 10px;
      border-left: 4px solid $--color-primary;
    }
  }
</style>
